<template>
  <div class="myEquipment">
    <el-dialog title="选择设备" :visible.sync="isDialogShowwu" :show-close="false" :close-on-click-modal="false" width="60%">
      <form @keyup.enter="search" @submit.prevent>
        <el-row class="search-box">
          <el-col :span="24">
            <label for="" class="choose">
              <el-select v-model="form.type" placeholder="请选择" size="small">
                <el-option label="设备号" :value="1"></el-option>
                <el-option label="当前版本号" :value="2"></el-option>
              </el-select>
              <el-input size="small" class="width200" placeholder="模糊搜索" v-model.trim="form.name" :maxlength="50"></el-input>
            </label>
            <label for="" class="choose">
              <el-button icon="search" type="primary" size="small" @click="search" v-resetClick>搜索</el-button>
            </label>
          </el-col>
        </el-row>
      </form>
      <el-row class="data-list">
        <el-table :data="lists" border class="table_box" style="width:100%" :empty-text="emptyText" ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowKeys">
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column prop="sn" label="设备号" align="center"></el-table-column>
          <el-table-column prop="sim" label="IMEI" align="center"></el-table-column>
          <el-table-column prop="class_id" label="设备型号" align="center"></el-table-column>
          <el-table-column prop="version" label="当前版本号" align="center"></el-table-column>
        </el-table>
        <paginate :callback="pageObj.callback" :page="pageObj.page"></paginate>
      </el-row>
      <div class="miaos">
        <!-- <el-checkbox v-model="isCheckbox" label="全部选择（以上查询结果）"></el-checkbox> -->
        <div class="text">当前已选中了 <span> {{multipleSelection.length}} </span> 台设备</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm(2)">取 消</el-button>
        <el-button type="primary" @click="submitForm(1)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import paginate from 'components/common/paginate'
import { devicelist } from 'api/txEquipment/index'
export default {
  data () {
    return {
      form: {
        type: '',
        name: ''
      },
      isCheckbox: false,
      formObj: {},
      isDialogShowwu: true,
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      lists: [],
      // idsss: null,
      multipleSelection: [],
      idsss: []
    }
  },
  props: {
    idsList: Array
  },
  components: {
    paginate
  },
  created () {
    this.idsss = JSON.parse(JSON.stringify(this.idsList))
    if (this.idsss.length) {
      devicelist({
        pageIndex: 0,
        pageSize: 5000
      }).then(res => {
        this.toggleSelection(res.data)
        this.filterObjEvemt()
      })
    } else {
      this.filterObjEvemt()
    }
  },
  methods: {
    getRowKeys (row) {
      return row.sn
    },
    handleSelectionChange (val) {
      let ids = []
      val.forEach(obj => {
        ids.push(obj.sn)
      })
      this.multipleSelection = ids
    },
    toggleSelection (arr) {
      let arrval = arr || this.lists
      this.$nextTick(function () {
        arrval.forEach(row => {
          if (this.idsss.indexOf(row.sn) !== -1) {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
      })
    },
    submitForm (num) {
      switch (num) {
        case 1:
          this.$emit('equipmentEvemt', {type: 1, lists: this.multipleSelection})
          break
        case 2:
          this.$emit('equipmentEvemt', {type: 2, lists: []})
          break
      }
    },
    search () {
      this.filterObjEvemt()
    },
    getData (int) { // 获取数据
      devicelist({
        pageIndex: int - 1,
        pageSize: 10,
        ...this.formObj
      }).then(res => {
        this.lists = res.data
        this.pageObj.page = res.page
        // this.toggleSelection()
        // res.page.forEach(oo => {
        //   if (this.multipleSelection.indexOf(oo.sn) !== -1) {
        //     this.$refs.multipleTable.toggleRowSelection(row, true)
        //   }
        // })
        // this.$refs.multipleTable.clearSelection()
      })
    },
    filterObjEvemt () {
      let obj = {}
      for (const key in this.form) {
        if (this.form[key] === '' || this.form[key] === null || this.form[key] === undefined) continue
        switch (key) {
          case 'type':
            if (this.form.type === 1 && this.form.name) obj.sn = this.form.name
            if (this.form.type === 2 && this.form.name) obj.version = this.form.name
            break
          default:
            // obj[key] = this.form[key]
            break
        }
      }
      this.formObj = JSON.parse(JSON.stringify(obj))
      this.getData(1)
      return obj
    }
  }
}
</script>
<style lang="less">
.myEquipment {
  .width200{width: 200px;}
  .width150{width: 150px;}
  .title {
    overflow: hidden;
    padding: 16px 30px;
    padding-bottom: 0;
  }
  .search-box {
    padding: 0 30px 20px 30px;
    background: #ffffff;
  }
  .data-list {
    padding: 10px 30px;
  }
  .choose {
    margin-right: 10px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .titleright{
    float: right;
    margin-left: 20px;
  }
  .miaos{
    padding: 0 30px;
    .text{
      padding-top: 10px;
      span{
        color: #FF0000;
        font-size: 18px;
      }
    }
  }
}
</style>
